import { DecorativeLine } from "@/components/base/DecorativeLine"
import { resolveAssetImage } from "@/utils/common"
import styled from "@emotion/styled"

const ResponsibleGamingStyled = styled.section`
    font-family: Gilroy;
    margin: 0 12rem 0;
    padding-bottom: 29rem;
`

const Title = styled.h3`
    padding: 0;
    margin: 0;
    margin-top: 7rem;
    font-weight: 700;
    font-size: 16rem;
    height: 24rem;
    line-height: 24rem;
    text-align: center;
`

const Content = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    height: 32rem;
    margin-top: 8rem;
`

const IconGaming = styled.img`
    width: 125rem;
    height: 28rem;
`

const IconFollowLogo = styled.img`
    width: 113rem;
    height: 24rem;
    object-fit: cover;
`

export function ResponsibleGaming() {
    return (
        <ResponsibleGamingStyled>
            <DecorativeLine
                width={351}
                height={1}
                color={"#D5D5D8"}
            />
            <Title>Responsible Gaming</Title>
            <Content>
                <IconFollowLogo src={resolveAssetImage("pages/HomePage/icon_follow_logo.webp")} />
                <DecorativeLine
                    containerStyle={{
                        marginLeft: "37rem",
                        marginRight: "32rem",
                    }}
                    width={1}
                    height={32}
                    color={`linear-gradient(
                        0deg,
                        rgba(28, 31, 35, 0.05) 0%,
                        rgba(28, 31, 35, 0.25) 50%,
                        rgba(28, 31, 35, 0.05) 100%
                    )`}
                />
                <IconGaming
                    src={resolveAssetImage("pages/HomePage/img_gaming.webp")}
                    alt=""
                />
            </Content>
        </ResponsibleGamingStyled>
    )
}
